<template>
  <div class="wrapper">
    <van-nav-bar
      :title="isLogin ? '登录' : '注册'"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <div class="logo">
      <img class="logo-img" src="../../assets/logo.png" alt="" />
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <Verify
        ref="veri"
        :type="2"
        @error="alertFn(2)"
        @success="alertFn(1)"
        :showButton="false"
      ></Verify>

      <div class="desc">
        <span @click="clickFn">{{
          isLogin ? "立即注册" : "已有账号 立即登录"
        }}</span>
      </div>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">{{
          isLogin ? "登录" : "注册"
        }}</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Verify from "vue2-verify";
import { register, login } from "@/http/index.js";
import { Notify } from "vant";

export default {
  name: "Login",
  props: [],
  components: { Verify },
  data() {
    return {
      username: "",
      password: "",
      isLogin: true,
      flag: false,
    };
  },
  methods: {
    clickFn() {
      this.isLogin = !this.isLogin;
      this.$refs.veri.refresh(); // 刷新验证码
    },
    // 验证码成功或失败
    alertFn(num) {
      // console.log("--->", num);
      this.flag = num == 1 ? true : false;
    },
    onSubmit() {
      this.$refs.veri.checkCode();
      if (this.flag) {
        // 表示验证码通过
        //登录
        if (this.isLogin) {
          login(this.username, this.password).then((res) => {
            //console.log("res=>",res)
            if (res.resultCode == 200) {
              // 登录成功
              localStorage.setItem("xftoken", res.data);
              this.$router.replace("/home");
              Notify({
                type: "success",
                message: "登录成功",
              });
            }
          });
        }
        //注册
        else {
          register(this.username, this.password).then((res) => {
            //console.log("res=>",res)
            if (res.resultCode == 200) {
              // 注册成功
              this.isLogin = true;
              Notify({
                type: "success",
                message: "注册成功",
              });
            }
          });
        }
        this.$refs.veri.refresh(); // 刷新验证码
      } else {
        // 表示验证码没有通过
        //alert('验证码错误');
        this.$toast("验证码错误");
        this.$refs.veri.refresh(); // 刷新验证码
      }
    },
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.wrapper {
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    .logo-img {
      width: 100px;
      height: 100px;
      padding-top: 20px;
      padding-bottom: 20px;
    }
  }
}

.desc {
  font-size: 14px;
  padding-left: 15px;
}

/deep/.cerify-code-panel {
  display: flex;
  margin-top: 0.42667rem;
  height: 100%;
  overflow: hidden;
  padding: 10px;
  .verify-code {
    width: 40% !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 16px !important;
  }

  .verify-code-area {
    width: 54%;
    margin-left: 0.37333rem;
    display: flex;
    justify-content: center;
    align-items: center;

    .verify-input-area .varify-input-code {
      width: 80px;
      height: 40px;
      border: 0.02667rem solid #e9e9e9;
      padding-left: 0.26667rem;
      font-size: 0.42667rem;
    }

    .verify-change-area {
      line-height: 1.17333rem;
      font-size: 12px;
    }
  }
}
</style>
